<script setup lang="ts">
import { ref, computed, reactive } from "vue";
import { useRouter } from "vue-router";
import { useRisk } from "../useRisk";
const router = useRouter();
import photo from "./photo.vue"
const emit = defineEmits(['send-tips'])
const initData = reactive({

} as any)
const props = defineProps<{ data: Project[], num: number }>()
const {
    details,
} = useRisk(props, initData, emit)

</script>
<template>
    <div class="show" v-for="risk in data" @click="details(risk)" >
        
        <div class="showMain">
            <div class="showLeft">
                <photo :url="risk.imageUrl"></photo>
            </div>
            <div class="showRight">
                <div class="titleBar">
                <h1 class="name">{{risk.name}}</h1>
                <div class="tag">
                <van-tag class="tag" type="primary">待核销</van-tag>
                </div>
                </div>
               
                <div class="riskList">
                    <div class="field">保单号：{{ num }}</div>
                    <div class="text">{{ risk.policyNo }}</div>
                </div>
                <div class="riskList">
                    <div class="field">城市：</div>
                    <div class="text">{{ risk.city }}</div>
                </div>
                <div class="riskList">
                    <div class="field">地址：</div>
                    <div class="text">{{ risk.district }}</div>
                </div>
                
            </div>
        </div>
    </div>
</template>
<style scoped>
.show {
    border-top: rgba(194, 191, 191, 0.425) 1px solid;
    display: flex;
    flex-direction: column;
    margin: 10px;
    background-color: white;
}
.showMain {
    display: flex;
    flex-direction: row;
    padding: 0px 10px 10px 10px;
}
.showLeft {
    margin: 5px;
}
.showRight{
    width: 100%;
}
.titleBar{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.name{
    font-size: 18px;
}
.tag{
    padding: 3px 7px 3px 7px;
}
:deep(.van-nav-bar) {
    border-radius: 10px;
}
:deep(.van-nav-bar__text) {
    color: rgb(66, 141, 228);
    font-size: 20px;
    font-weight: bolder;
}
.field {
    color: rgba(48, 61, 78);
    line-height: 15px;
    font-size: 14px;
    font-weight: bolder;
}
.text {
    font-size: 14px;
    color: rgba(89, 89, 89);
    line-height: 16px;
}
.riskList {
    display: flex;
    flex-direction: row;
    margin-top: 5px;
}
</style>